<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入模型名称"
              v-model="searchForm.searchInput"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="searchClick">搜索</el-button>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="success" icon="el-icon-refresh" @click="refresh"
          >刷新</el-button
        >
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="deviceName" label="设备名称" align="center" />
          <el-table-column prop="modelType" label="模型类型" align="center" />
          <el-table-column
            prop="deviceNumber"
            label="设备型号"
            align="center"
          />
          <el-table-column prop="deviceId" label="设备ID" align="center" />
          <el-table-column label="备注" align="center" prop="deviceMark">
          </el-table-column>

          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <el-button type="warning" size="mini" @click="handlerEdit(row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>
  </div>
</template>

<script>
import { queryAllDeviceByProjectCode } from "@/api/device/index"

import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      tableData: [],
      count: 0,
      searchForm: {},
      pageIndex: 1,
      pageSize: 20,
      loading: false
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.getData()
  },
  methods: {
    change(val) {
      console.log(val, "val")
    },
    async getData(pageIndex = 1, pageSize = 20) {
      this.loading = true
      const { searchInput } = this.searchForm
      const data = await queryAllDeviceByProjectCode({
        pageIndex,
        pageSize,
        deviceName: searchInput,
        deviceType: "1"
      })
      this.count = data.object.count
      this.tableData = data.object.data
      this.loading = false
    },
    handlerEdit(row) {
      this.$router.push({
        path: "/device/guhuaDetail",
        query: { ...row }
      })
    },
    async searchClick() {
      this.getData(1, 20)
    },
    pagination(pageItem) {
      this.getData(pageItem.page, pageItem.limit)
    },
    refresh() {
      this.searchForm = {}
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
.clientType {
  .title-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;

    .left-box {
      display: flex;

      .formClass {
        display: flex;
        margin-right: 20px;
        .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;
          .el-input {
            width: 216px;
          }
          .el-select {
            width: 171px;
            margin-left: 10px;
          }
          .el-date-editor {
            width: 336px;
            margin-left: 10px;
          }
        }
      }
      .el-button {
        // width: 42px;
        height: 36px;
        margin-top: 20px;
      }
    }
  }
}
</style>
